<template>
	<h1>用户信息管理</h1>
	<div class="search">
		<!-- @keyup.native.enter="searchuserinfo" -->
		<el-input placeholder="请输入用户名" v-model="inpuserName"  @keyup.native.enter="searchuserinfo"></el-input>
		<el-input placeholder="请输入联系方式" v-model="inpuserPhone"  @keyup.native.enter="searchuserinfo"></el-input>
		<el-button @click="searchuserinfo" class="searchBtn" type="info" :icon="Search" >搜索</el-button>
	</div>
	<div class="chart">
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="iserIcon" label="头像">
				<template  #default="scope">
					<img style="width:50px;height:50px;object-fit: cover;" :src="baseUrl+scope.row.iserIcon"/>
				</template>
			</el-table-column>
			<el-table-column prop="userName" label="用户名"  />
			<el-table-column prop="userAccount" label="账号" />
			<el-table-column prop="addressContent" label="收货地址" />
			<el-table-column prop="userPhone" label="联系方式" />
		</el-table>
		<el-pagination
		layout="prev,pager,next"
		:page-count="total"
		:page-size="pageSize"
		v-model:current-page="pageIndex"	
		@current-change="changePage"
		></el-pagination>
	</div>
</template>

<script setup lang="ts">
	import {ref,reactive, onMounted} from "vue"
	import { Search,CirclePlus} from '@element-plus/icons-vue';
	import {userinfoshow,searchuser} from "../api/zhy"
	import {baseUrl} from "../utils/request.ts"
	import { ElMessage,ElMessageBox} from 'element-plus'
	let inpuserName=ref("")
	let inpuserPhone=ref("")
	let pageSize=ref(5)
	let pageIndex=ref(1)
	let total=ref(0)
	let tableData=ref([])
	const inituserinfo=async()=>{
		let res=await userinfoshow({
			pageSize:pageSize.value,
			pageIndex:pageIndex.value,
		})
		console.log(res,"用户信息")
		Object.assign(tableData.value,res.context)
		total.value=res.pageTotal
		pageIndex.value=res.pageIndex
	}
	inituserinfo()
	//搜索用户信息
	const searchuserinfo=async()=>{
		let res=await searchuser({
			pageSize:Number(pageSize.value),
			userName:inpuserName.value,
			userPhone:inpuserPhone.value,
			pageIndex:Number(pageIndex.value),
		})
		console.log(res,"搜索用户信息")
		tableData.value=res.context
		total.value=res.pageTotal
		// pageIndex.value=res.pageIndex+"" 
	}
	//点击分页器
	const changePage=(page)=>{
		//console.log(page)
		pageIndex.value=page;
		if(inpuserName.value==''&&inpuserPhone.value==''){
			inituserinfo()
		}else{
			searchuserinfo()
		}
		
	}

</script>

<style scoped lang="less">
	.search{
		width:100%;
		// height: 50px;
		margin:10px auto;
		display: flex;
		align-items: center;
	}
	.el-input{
	    width: 150px;
		// height: 40px;
	    margin-right:30px;
	    border: none;
	 }
	 .searchBtn{
	    background-color: #106ab1;
	    border: none;
		// height: 40px;
	 }
	 .addBtn{
	    background-color: #00a0e9;
	    border: none;
	    float: right;
	    margin-right: 20px;
		// height: 40px;
	 }
	:deep(.el-table tr){
		height: 80px;
	}
	:deep(.el-table .el-table__cell){
		text-align: center !important;
	}
	  // 分页样式
	 .el-pagination{
	 	--el-pagination-bg-color:none;
	 	--el-pagination-button-disabled-bg-color:none;
	 	justify-content: center;
	 }
</style>